<script setup>
import { onBeforeMount, onMounted ,onBeforeUnmount ,defineProps , ref, reactive} from 'vue'
import Header from "@/components/header.vue";
import Carousel from "@/components/Carousel.vue";
import { useRoute } from 'vue-router'
const route = useRoute()
// 封装请求
import { getdata ,postdata } from "@/api/layout.js";
import a from '@/assets/电梯.png'
import b from '@/assets/2.png'
import c from '@/assets/3.png'
import d from '@/assets/4.png'
import e from '@/assets/5.png'
import f from '@/assets/6.png'
import g from '@/assets/7.png'
import h from '@/assets/8.png'
// 组件传参
const props = defineProps({
  id: String,
})
// 初始化之前后变成了setup函数，这个事挂载之前
onBeforeMount(() => {
  console.log('挂载渲染dom之前')
  // 通过路由获取参数
  console.log('id',route.query.id)
  // 请求店铺数据
  getdetail()
})

onMounted(() => {

})
onBeforeUnmount(() => {
  console.log('组件即将被销毁')
})

const peitao = ref([
  {icon: a,name:'客梯'},
  {icon: b,name:'货梯'},
  {icon: c,name:'中央空调'},
  {icon: d,name:'可明火'},
  {icon: e,name:'电话/网 络'},
  {icon: f,name:'停车位'},
  {icon: h,name:'天然气'},
  {icon: a,name:'暖气'},
  {icon: b,name:'外摆区'},
  {icon: c,name:'下水'},
  {icon: d,name:'上水'},
  {icon: e,name:'排污'},
  {icon: f,name:'扶梯'},
  {icon: g,name:'380V'},
])


// 请求详细的接口
const transdetail = ref(null)
const getdetail= async () =>{
  let params = reactive({
    id: route.query.id,
  })
  transdetail.value =  await getdata('/h5/api/app/shop_transfer/info',params)
  console.log("请求详细信息返回的数据",transdetail.value.data)
}


</script>

<template>
  <div class="root">
    <Header></Header>
    <div class="Breadcrumb">首页 > 店铺详情</div>
    <div class="information" v-if="transdetail">
      <div class="title"><span v-if="transdetail.data.is_swerve" class="span1">(急转)</span>{{transdetail.data.title}}</div>
      <div class="center">
<!--        {{transdetail.data.imgs}}-->
        <div class="centerleft">
          <carousel :img-list="transdetail.data.imgs"></carousel>
        </div>
        <div class="centerright">
          <div class="cnetertop">
            <div class="detiilone">
              <div class="textone">{{transdetail.data.rent}}<span class="span1">元/月</span></div>
              <div class="texttwo">转让费：{{transdetail.data.transfer_fee != '' ?transdetail.data.transfer_fee + '元': '面议'}}</div>
            </div>
            <div class="detiiltwo">商铺性质：<span class="span1">{{transdetail.data.shop_type}}</span></div>
            <div class="detiiltwo">建筑面积：<span class="span1">{{transdetail.data.shop_area}}㎡</span></div>
            <div class="detiiltwo">来        源：：<span class="span1">个人发布</span></div>
            <div class="detiiltwo">更新发布：<span class="span1">{{transdetail.data.create_time}}</span></div>
            <div class="detiiltwo">所属区域：<span class="span1">{{transdetail.data.province + '-' + transdetail.data.city + '-' +transdetail.data.county }}</span></div>
            <div class="detiilthree">详细地址：<span class="span1">{{transdetail.data.provinceprofession}}</span></div>
          </div>
          <a href="tel:${item.phone}"><div class="cneterbuttom">电话联系TA</div></a>
        </div>
      </div>
    </div>
<!--    详细介绍-->
    <div class="samlltitle">
        <div class="titcenter">详细介绍</div>
    </div>
    <div class="introduce" v-if="transdetail&&transdetail.data">
      <div class="content" v-html="transdetail.data.detailed_introduction"></div>
    </div>
    <div class="samlltitle">
      <div class="titcenter">配套设施</div>
    </div>
    <div class="Supporting">
      <div class="peitailist">
        <div class="peitaoitem" v-for="(item,index) in peitao">
          <img class="icon" :src="item.icon">
          <div class="text">{{item.name}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.root {
  width: 1920px;
  //height: 100vh;
  background-color: #fff;
  margin: 0 auto;
  .Breadcrumb{
    width: 100%;
    height: 40px;
    background-color: rgba(247, 247, 247, 1);
    font-size: 14px;
    line-height: 40px;
    color: rgba(128, 128, 128, 1);
    text-indent: 170px;
  }
  .information{
    width: 100%;
    //height: 400px;
    background-color: #fff;
    .title{
      width: 1580px;
      line-height: 30px;
      margin: 20px 0 0 160px;
      font-size: 24px;
      font-weight: 700;
      color: rgba(46, 46, 46, 1);
      .span1{
        color: rgba(255, 87, 51, 1);
      }
    }
    //个人信息主体内容
    .center{
      width: 1580px;
      height: 700px;
      margin: 10px 0 0 160px;
      //background-color: pink;
      display: flex;
      .centerleft{
        width: 750px;
        height: 700px;
        //border: 1px solid black;
      }
      .centerright{
        width: 750px;
        height: 700px;
        margin-left: 80px;
        //border: 1px solid black;
        .cnetertop{
          width: 750px;
          height: 500px;
          .detiilone{
            width: 750px;
            height: 40px;
            line-height: 40px;
            margin: 20px 0 30px 0;
            display: flex;
            .textone{
              height: 40px;
              font-size: 48px;
              font-weight: 700;
              line-height: 40px;
              color: rgba(255, 87, 51, 1);
              .span1{
                font-size: 24px;
              }
            }
            .texttwo{
              font-size: 24px;
              font-weight: 500;
              margin: 0 0 0 70px;
              line-height: 60px;
              color: rgba(128, 128, 128, 1);
            }
          }
          .detiiltwo{
            width: 750px;
            height: 40px;
            margin: 16px 0 0 0;
            font-size: 22px;
            font-weight: 500;
            line-height: 40px;
            color: rgba(128, 128, 128, 1);
            .span1{
              font-size: 22px;
              font-weight: 500;
              line-height: 40px;
              color: rgba(56, 56, 56, 1);
            }
          }
          .detiilthree{
            width: 750px;
            line-height: 30px;
            margin: 16px 0 0 0;
            font-size: 22px;
            font-weight: 500;
            line-height: 40px;
            color: rgba(128, 128, 128, 1);
            .span1{
              font-size: 22px;
              font-weight: 500;
              line-height: 40px;
              color: rgba(56, 56, 56, 1);
            }
          }
        }
        a{
          text-decoration: none;
        }
        .cneterbuttom{
          width: 400px;
          height: 80px;
          margin: 92px 0 0 60px;
          background-color: rgba(255, 87, 51, 1);
          font-size: 24px;
          font-weight: 700;
          line-height: 80px;
          color: rgba(255, 255, 255, 1);
          text-align: center;

        }
      }
    }
  }
  .samlltitle{
    width: 100%;
    height: 40px;
    .titcenter{
      width: 1000px;
      height: 40px;
      margin: 60px 0 0 160px;
      line-height: 40px;
      font-size: 24px;
      font-weight: 700;
      color: rgba(0, 0, 0, 1);
    }
  }
  .introduce{
    width: 100%;
    padding: 20px 0 0 170px;
  }
  .Supporting{
    width: 100%;
    margin: 10px 0 30px 0;
    .peitailist{
      width: 1580px;
      display: flex;
      flex-wrap: wrap;
      margin: 10px 0 0 160px;
      .peitaoitem{
        width: 120px;
        height: 40px;
        //background-color: pink;
        margin: 20px;
        display: flex;
        .icon{
          width: 28px;
          height: 28px;
          margin: 6px;
        }
        .text{
          height: 40px;
          line-height: 40px;
        }
      }
    }
  }
}
</style>
